<template>
	<view class="register-container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="注册"></custom-navbar>
		
		<!-- 注册表单 -->
		<view class="form-container">
			<!-- 表单输入区域 -->
			<view class="form-section">
				<view class="form-item">
					<view class="input-label">负责人:</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.responsiblePerson" 
							placeholder="输入负责人姓名" 
							class="input-field"
						/>
					</view>
				</view>
				
				<view class="form-item">
					<view class="input-label">身份证号码:</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.idCard" 
							placeholder="输入负责人身份证号码" 
							class="input-field"
							maxlength="18"
						/>
					</view>
				</view>
				
				<view class="form-item">
					<view class="input-label">手机号:</view>
					<view class="input-wrapper">
						<input 
							type="number" 
							v-model="formData.phone" 
							placeholder="输入手机号" 
							class="input-field"
							maxlength="11"
						/>
					</view>
				</view>
				
				<view class="form-item">
					<view class="input-label">验证码:</view>
					<view class="input-wrapper code-wrapper">
						<input 
							type="number" 
							v-model="formData.code" 
							placeholder="输入验证码" 
							class="input-field"
							maxlength="6"
						/>
						<button 
							class="code-btn" 
							:class="{ disabled: !canSendCode }"
							@click="sendCode"
							:disabled="!canSendCode"
						>
							{{ codeText }}
						</button>
					</view>
				</view>
				
				<view class="form-item">
					<view class="input-label">店名:</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.shopName" 
							placeholder="输入店名" 
							class="input-field"
						/>
					</view>
				</view>
				
				<view class="form-item">
					<view class="input-label">工商营业执照号码:</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.licenseNumber" 
							placeholder="输入号码" 
							class="input-field"
						/>
					</view>
				</view>
				
				<view class="form-item">
					<view class="input-label">经营区域:</view>
					<view class="input-wrapper select-wrapper" @click="showAreaPicker">
						<text class="select-text" :class="{ placeholder: !formData.area }">
							{{ formData.area || '选择区县' }}
						</text>
						<image src="/static/收起箭头小.png" mode="aspectFit" class="select-arrow"></image>
					</view>
				</view>
				
				<view class="form-item">
					<view class="input-label">地址:</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.address" 
							placeholder="输入详细地址" 
							class="input-field"
						/>
					</view>
				</view>
			</view>
			
			<!-- 商家简介区域 -->
			<view class="form-section">
				<view class="section-title">商家简介</view>
				<view class="textarea-wrapper">
					<textarea 
						v-model="formData.description" 
						placeholder="请简单的介绍一下公司的情况" 
						class="textarea-field"
						maxlength="500"
					></textarea>
				</view>
			</view>
			
			<!-- 图片上传区域 -->
			<view class="form-section">
				<!-- 身份证正反面照片 -->
				<view class="upload-section">
					<view class="section-title">身份证正反面照片</view>
					<view class="upload-row">
						<view class="upload-item" @click="chooseImage('idCardFront')">
							<image v-if="formData.idCardFront" :src="formData.idCardFront" mode="aspectFill" class="uploaded-image"></image>
							<view v-else class="upload-placeholder">
								<image src="/static/加号.png" mode="aspectFit" class="plus-icon"></image>
								<text class="upload-text">上传人像面</text>
							</view>
						</view>
						<view class="upload-item" @click="chooseImage('idCardBack')">
							<image v-if="formData.idCardBack" :src="formData.idCardBack" mode="aspectFill" class="uploaded-image"></image>
							<view v-else class="upload-placeholder">
								<image src="/static/加号.png" mode="aspectFit" class="plus-icon"></image>
								<text class="upload-text">上传国徽面</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 营业执照 -->
				<view class="upload-section">
					<view class="section-title">营业执照</view>
					<view class="upload-item" @click="chooseImage('license')">
						<image v-if="formData.license" :src="formData.license" mode="aspectFill" class="uploaded-image"></image>
						<view v-else class="upload-placeholder">
							<image src="/static/加号.png" mode="aspectFit" class="plus-icon"></image>
							<text class="upload-text">上传照片</text>
						</view>
					</view>
				</view>
				
				<!-- 门店照片 -->
				<view class="upload-section">
					<view class="section-title">门店照片</view>
					<view class="upload-item" @click="chooseImage('shopPhoto')">
						<image v-if="formData.shopPhoto" :src="formData.shopPhoto" mode="aspectFill" class="uploaded-image"></image>
						<view v-else class="upload-placeholder">
							<image src="/static/加号.png" mode="aspectFit" class="plus-icon"></image>
							<text class="upload-text">上传照片</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 注册按钮 -->
			<button class="register-btn" @click="handleRegister" :disabled="!canRegister">
				注册
			</button>
		</view>
		
		<!-- 区域选择器弹窗 -->
		<uni-popup ref="areaPopup" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">选择经营区域</text>
					<text class="popup-close" @click="closeAreaPicker">关闭</text>
				</view>
				<picker-view 
					:value="areaPickerValue" 
					@change="onAreaChange" 
					class="area-picker"
				>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in areaList" :key="index">
							{{ item }}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	components: {
		'custom-navbar': () => import('@/components/custom-navbar.vue')
	},
	data() {
		return {
			formData: {
				responsiblePerson: '',
				idCard: '',
				phone: '',
				code: '',
				shopName: '',
				licenseNumber: '',
				area: '',
				address: '',
				description: '',
				idCardFront: '',
				idCardBack: '',
				license: '',
				shopPhoto: ''
			},
			countdown: 0,
			timer: null,
			areaList: ['朝阳区', '海淀区', '丰台区', '石景山区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云区', '延庆区'],
			areaPickerValue: [0]
		}
	},
	computed: {
		canSendCode() {
			return this.formData.phone.length === 11 && this.countdown === 0
		},
		canRegister() {
			return this.formData.responsiblePerson.trim() &&
				   this.formData.idCard.trim() &&
				   this.formData.phone.length === 11 &&
				   this.formData.code.length === 6 &&
				   this.formData.shopName.trim() &&
				   this.formData.licenseNumber.trim() &&
				   this.formData.area &&
				   this.formData.address.trim() &&
				   this.formData.description.trim()
		},
		codeText() {
			return this.countdown > 0 ? `${this.countdown}s` : '获取验证码'
		}
	},
	onLoad() {
		// 页面加载
	},
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer)
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 发送验证码
		sendCode() {
			if (!this.canSendCode) return
			
			// 验证手机号格式
			const phoneReg = /^1[3-9]\d{9}$/
			if (!phoneReg.test(this.formData.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			// 开始倒计时
			this.countdown = 60
			this.timer = setInterval(() => {
				this.countdown--
				if (this.countdown <= 0) {
					clearInterval(this.timer)
					this.timer = null
				}
			}, 1000)
			
			// 模拟发送验证码
			uni.showToast({
				title: '验证码已发送',
				icon: 'success'
			})
		},
		
		// 选择图片
		chooseImage(type) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.formData[type] = res.tempFilePaths[0]
				}
			})
		},
		
		// 显示区域选择器
		showAreaPicker() {
			this.$refs.areaPopup.open()
		},
		
		// 关闭区域选择器
		closeAreaPicker() {
			this.$refs.areaPopup.close()
		},
		
		// 区域选择变化
		onAreaChange(e) {
			const index = e.detail.value[0]
			this.formData.area = this.areaList[index]
			this.areaPickerValue = [index]
		},
		
		// 注册
		handleRegister() {
			if (!this.canRegister) {
				uni.showToast({
					title: '请完善所有必填信息',
					icon: 'none'
				})
				return
			}
			
			// 验证手机号格式
			const phoneReg = /^1[3-9]\d{9}$/
			if (!phoneReg.test(this.formData.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			// 验证身份证号格式
			const idCardReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
			if (!idCardReg.test(this.formData.idCard)) {
				uni.showToast({
					title: '请输入正确的身份证号码',
					icon: 'none'
				})
				return
			}
			
			// 验证验证码
			if (this.formData.code.length !== 6) {
				uni.showToast({
					title: '请输入6位验证码',
					icon: 'none'
				})
				return
			}
			
			// 显示加载中
			uni.showLoading({
				title: '注册中...'
			})
			
			// 模拟注册请求
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				})
				
				// 跳转到登录页面
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}, 2000)
		}
	}
}
</script>

<style lang="scss" scoped>
.register-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
	padding-top: calc(env(safe-area-inset-top) + 88rpx);
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: calc(env(safe-area-inset-top) + 88rpx);
		left: 0;
		right: 0;
		height: 600px;
		background-image: linear-gradient(
			to bottom,
			#2f81fa 0%, #2f81fa 33.33%,
			#f7f7f7 33.33%, #f7f7f7 100% 
		);
		background-repeat: no-repeat;
		z-index: 0;
	}
}

.form-container {
	position: relative;
	z-index: 1;
	padding: 0 40rpx 40rpx;
	margin-top: 20rpx;
}

.form-section {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.form-item {
	margin-bottom: 30rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	.input-label {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 16rpx;
		font-weight: 500;
	}
	
	.input-wrapper {
		background: #f8f9fa;
		border: 2rpx solid #e9ecef;
		border-radius: 12rpx;
		padding: 0 24rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		
		.input-field {
			flex: 1;
			font-size: 32rpx;
			color: #333333;
		}
		
		&.code-wrapper {
			.code-btn {
				background: #007AFF;
				color: #ffffff;
				border: none;
				border-radius: 8rpx;
				padding: 16rpx 24rpx;
				font-size: 24rpx;
				margin-left: 20rpx;
				
				&.disabled {
					background: #cccccc;
					color: #999999;
				}
			}
		}
		
		&.select-wrapper {
			justify-content: space-between;
			
			.select-text {
				font-size: 32rpx;
				color: #333333;
				
				&.placeholder {
					color: #999999;
				}
			}
			
			.select-arrow {
				width: 32rpx;
				height: 32rpx;
				transform: rotate(180deg);
			}
		}
	}
}

.section-title {
	font-size: 32rpx;
	color: #333333;
	font-weight: 600;
	margin-bottom: 24rpx;
}

.textarea-wrapper {
	background: #f8f9fa;
	border: 2rpx solid #e9ecef;
	border-radius: 12rpx;
	padding: 24rpx;
	
	.textarea-field {
		width: 100%;
		min-height: 200rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 1.5;
	}
}

.upload-section {
	margin-bottom: 40rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	.upload-row {
		display: flex;
		gap: 20rpx;
		
		.upload-item {
			flex: 1;
		}
	}
	
	.upload-item {
		width: 100%;
		height: 200rpx;
		border: 2rpx dashed #d1d5db;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #f8f9fa;
		
		.upload-placeholder {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.plus-icon {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 16rpx;
			}
			
			.upload-text {
				font-size: 28rpx;
				color: #666666;
			}
		}
		
		.uploaded-image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}
}

.register-btn {
	width: 100%;
	height: 88rpx;
	background: #007AFF;
	color: #ffffff;
	border: none;
	border-radius: 12rpx;
	font-size: 32rpx;
	font-weight: 500;
	margin-top: 40rpx;
	
	&:disabled {
		background: #cccccc;
		color: #999999;
	}
}

.popup-content {
	background: #ffffff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 40rpx;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		
		.popup-title {
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
		}
		
		.popup-close {
			font-size: 28rpx;
			color: #007AFF;
		}
	}
	
	.area-picker {
		height: 400rpx;
		
		.picker-item {
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333333;
		}
	}
}
</style>
